<script>
import '@/assets/styles/preview.css'
import 'katex/dist/katex.min.css'
import katex from 'katex'

require('katex/contrib/mhchem/mhchem')

export default {
  name: 'PreviewView',
  data() {
    return {
      documentHtml: null
    }
  },
  mounted() {
    this.initDocument()
    this.$nextTick(() => {
      this.setTableTdEditable()
    })
  },
  methods: {
    initDocument() {
      this.documentHtml = sessionStorage.getItem('documentHtml')
      this.$nextTick(() => {
        const spans = document.querySelector('#document-container').querySelectorAll('span')
        spans.forEach(dom => {
          if (dom.dataset['wEType'] === 'formula') {
            const formula = dom.dataset['value']
            console.log(formula)
            const html = katex.renderToString(formula)
            dom.innerHTML = html
          }
        })
      })
    },
    setTableTdEditable() {
      const tdList = document.querySelector('#document-container').querySelectorAll('td')
      for (const tdElem of tdList) {
        tdElem.setAttribute('contenteditable', 'true')
      }
    }
  }
}
</script>

<template>
  <div class='preview-container'>
    <div id='document-container' class='document-container' v-html='documentHtml' />
  </div>
</template>

<style lang='scss'>
.preview-container {
  height: 100%;
  padding: 12px;
  position: relative;

  .document-container {
    height: 100%;
    position: relative;
  }
}
</style>
